style: Rewrote app grid tile drawing functions

- updated mixin for tile_button
- dropped the overview_button mixin
- minor changes to dash, appDisplay and switcherPopup JS to accommodate new stylesheet
- new focus style for all tile buttons
- improved high contrast style support for app grid and dash
- renamed some style-classes
- tidied up dash stylesheet

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3017>

diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
index 67378203e2c25b9574e624eec8dd7d5f70d019a1..20ce590c4150f3bfa2a95e945df2dd9689e477af 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.scss
+++ b/data/theme/gnome-shell-high-contrast.scss
@@ -29,4 +29,6 @@ $variant: 'dark';
   background-color: $osd_bg_color;
   padding: $base_padding * 2;
   border-radius: $modal_radius;
+  border: 2px solid $hc_inset_color;
+  margin: $base_padding * 3;
 }

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 965f350756db08d75552d0eae4886ab251579901..ea835a3eb406113c321c890f4c6978844ca2a220 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -72,7 +72,9 @@ stage {
   border-radius: $base_border_radius * 2;
   padding: $base_padding;
   spacing: $base_padding;
-  border: 2px solid transparent;
+  border-width: 2px;
+  border-style: solid;
+  border-color:transparent;
   transition-duration: 200ms;
   text-align: center;
   color: inherit;

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 23e996ac2bcf7cc6de54e01ebc761813d7118a20..ff404b04720a81936adbcf2c15f6a318c3bfb32d 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -273,63 +273,71 @@
   }
 }
 
-// tile
+// Helper mixin for button-like elements with an icon
 @mixin tile_button($color, $flat: true) {
   @extend %tile;
+
+  // focus-color
+  $fc: mix($selected_bg_color, $color, 90%);
+
   @if $flat {
     background-color: transparent;
+    &:hover { background-color: transparentize($color, .88);}
+    &:highlighted, &:focus {
+      background-color: transparentize($fc, .84);
+      &:hover {
+        background-color: transparentize($fc, .68);
+      }
+    }
   } @else {
     background-color: transparentize($color, .84);
-    @if $is_highcontrast {
-      box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack
+    &:hover { background-color: transparentize($color, .72);}
+    &:highlighted, &:focus {
+      background-color: transparentize(mix($fc, $color, 20%), .84);
+      &:hover {
+        background-color: transparentize(mix($fc, $color, 20%), .68);
+      }
     }
   }
-  &:hover { background-color: transparentize($color, .9);}
-  &:selected, &:focus {
-    background-color: transparentize($color, .87);
-    &:hover { background-color: transparentize($color, .84);}
-    &:active { background-color: transparentize($color, .87);}
-  }
-  &:active { background-color: transparentize($color, .84);}
-  &:outlined, &:checked {
-    background-color: transparentize($color, .81);
-    &:active { background-color: transparentize($color, .78);}
-    &:hover { background-color: transparentize($color, .75);}
-  }
-  &:drop {
-    border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
-    background-color: transparentize($selected_bg_color, .8);
-  }
-}
 
-// overview icon, dash, app grid
-@mixin overview_icon($color, $flat: true) {
-  transition-duration: 400ms;
-  .overview-icon {
-    @extend %tile;
+  // bit of a hack to have nice high contrast
+  @if $is_highcontrast {
+    @if $flat {
+      &:hover {
+        box-shadow: inset 999px 0 0 0 transparentize($color, .92);
+      }
+      &:highlighted, &:focus {
+        box-shadow: inset 999px 0 0 0 transparentize($fc, .8);
+      }
+    } @else {
+      box-shadow: inset 999px 0 0 0 transparentize($color, .92);
+      border-color: transparentize($color, .44);
+      &:highlighted, &:focus {
+        box-shadow: inset 999px 0 0 0 transparentize($fc, .8);
+      }
+    }
   }
-  @if $flat {
-    .overview-icon { background-color: transparent;}
-  } @else {
-    .overview-icon { background-color: transparentize($color, .93); }
+
+  &:highlighted, &:focus {
+    border-color: transparentize($fc, .3);
   }
-  &:hover .overview-icon { background-color: transparentize($color, .87);}
 
-  &:selected .overview-icon,
-  &:focus .overview-icon {
-    background-color: transparentize($color, .87);
-    &:hover .overview-icon { background-color: transparentize($color, .84);}
-    &:active .overview-icon { background-color: transparentize($color, .87);}
+  &:active {
+    background-color: transparentize($color, .76);
+    &:focus {
+      background-color: transparentize($fc, .68);
+    }
   }
-  &:active .overview-icon { background-color: transparentize($color, .84);}
-  &:outlined .overview-icon,
-  &:checked .overview-icon {
+
+  &:selected,
+  &:checked {
     background-color: transparentize($color, .81);
-    &:active .overview-icon { background-color: transparentize($color, .78);}
-    &:hover .overview-icon { background-color: transparentize($color, .75);}
+    &:active { background-color: transparentize($color, .78);}
+    &:hover { background-color: transparentize($color, .75);}
   }
-  &:drop .overview-icon {
-    border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
+
+  &:drop {
+    border-color: transparentize($selected_bg_color, .2);
     background-color: transparentize($selected_bg_color, .8);
   }
 }

diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index dc74a7e88fc8778fbdf76ed1d3b5b0750fa8ed7d..ed087f7d8641d2fca49f35666025819fd99fe1d9 100644 (file)
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -71,4 +71,4 @@ $active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_colo
 $active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%));
 
 // inset colour for high contrast
-$hc_inset_color: transparentize($fg_color, 0.7);
+$hc_inset_color: transparentize($fg_color, 0.6);

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index c0d1631da115dadde7dee35263800a250eccd7ac..0ce848dcb1a43b1d27638cf0756979126883167f 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -16,25 +16,40 @@ $app_icon_size: 96px;
 
 /* App Icons */
 
-// Icon tiles in the app grid
-.app-well-app {
-  @include overview_icon($system_fg_color);
+// items in the app grid and dash
+.overview-tile {
+  @include tile_button($system_fg_color);
 
+  // override the %tile style
+  border-radius: $base_border_radius*3;
+  padding: $base_padding * 2;
+
+  // the icon itself
   .overview-icon {
-    padding: $base_padding * 2;
-    border-radius: $base_border_radius * 3;
-    color: $system_fg_color;
-  }
-  .overview-icon.overview-icon-with-label {
-    > StBoxLayout {
-      spacing: $base_padding;
+    // item with a label
+    &.overview-icon-with-label {
+      > StBoxLayout {
+        spacing: $base_padding;
+      }
     }
   }
 }
 
 // app folders
-.app-well-app.app-folder {
-  @include overview_icon($system_fg_color, $flat: false);
+.app-folder {
+  @include tile_button($system_fg_color, $flat: false);
+}
+
+// Running app indicator (also shown in dash)
+.app-grid-running-dot {
+  height: 5px;
+  width: 5px;
+  border-radius:5px;
+  background-color: $system_fg_color;
+  margin-bottom: 2px;
+  @if $is_highcontrast {
+    margin-bottom: 4px;
+  }
 }
 
 // expanded folder
@@ -88,14 +103,6 @@ $app_icon_size: 96px;
   height: 720px;
 }
 
-// Running app indicator (also shown in dash)
-.app-well-app-running-dot {
-  height: 5px;
-  width: 5px;
-  border-radius:5px;
-  margin-bottom: 8px;
-  background-color: $system_fg_color;
-}
 
 // Rename popup for app folders
 .rename-folder-popup {
@@ -135,6 +142,7 @@ $page_indicator_size: 10px;
   }
 }
 
+// page navigation
 .page-navigation-hint {
   &.dnd {
     background: rgba(255, 255, 255, 0.1);

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 169d1e245c2b6c2ad370b9c43d1d2fd1030456c9..90a520bcc36107edd054aef0ecef7f883a649b96 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -4,75 +4,75 @@
 $dash_background_color: $system_overlay_bg_color;
 
 $dash_placeholder_size: 32px;
-$dash_padding: $base_padding * 2; // 12px
+$dash_padding: $base_padding * 1.5;
+$dash_edge_offset: $base_margin * 3;
 $dash_border_radius: $modal_radius + $dash_padding;
 
 // container for the dash
 #dash {
-  @extend %caption;
-  margin-top: $dash_padding;
+  margin-top: $dash_edge_offset;
 
-  .placeholder {
-    // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
-    background-image:none;
-    background-size: contain;
-    height: $dash_placeholder_size;
-  }
+  // background behind item container
+  .dash-background {
+    background-color: $dash_background_color;
+    border-radius: $dash_border_radius;
+    border: 2px solid transparent;
+    padding: $dash_padding * 2 $dash_padding; // padding is uneven
 
-  .empty-dash-drop-target {
-    width: $dash_placeholder_size;
-    height: $dash_placeholder_size;
+    @if $is_highcontrast {
+      border-color: $hc_inset_color;
+    }
   }
 
-  // Running app indicator (also shown in app grid)
-  .app-well-app-running-dot {
-    margin-bottom: 14px; // hardcoded
-  }
-}
+  // items on the dash
+  .dash-item-container {
 
-// background of the dash behind app icons
-.dash-background {
-  background-color: $dash_background_color;
-  border-radius: $dash_border_radius;
-  padding: $dash_padding;
-  spacing: $base_padding;
-  margin-bottom: $dash_padding;
+    .placeholder {
+      // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
+      background-image: none;
+      background-size: contain;
+      height: $dash_placeholder_size;
+    }
 
-  @if $is_highcontrast {
-    border: 2px solid $hc_inset_color;
-    box-shadow:none;
-  }
-}
+    .empty-dash-drop-target {
+      width: $dash_placeholder_size;
+      height: $dash_placeholder_size;
+    }
+
+    // app icons
+    .overview-tile {
+      // inherits styles from _app-grid.css
+    }
 
-// items on the dash
-.dash-item-container {
-  > * {margin: 0 2px;}
-  &:ltr{&:first-child {margin-left: 0;}}
-  &:rtl{&:first-child {margin-right: 0;}}
+    // button to show app grid
+    .show-apps {
+      @include tile_button($system_fg_color);
+    }
 
-  // each app item on the dash
-  .app-well-app .overview-icon {
-    padding: $base_padding;
-    border-radius: $base_border_radius * 2;
+    .show-apps, .overview-tile {
+      margin: $base_margin * 0.5;
+      padding: $base_padding;
+      border-radius: $base_border_radius * 2;}
   }
 
-  // show apps button
-  .show-apps { @include overview_icon($system_fg_color);}
+  // separator between pinned and running apps
+  .dash-separator {
+    width: 1px;
+    margin-left:$base_margin;
+    margin-right:$base_margin;
+    background-color: $system_borders_color;
 
-  .show-apps, .app-well-app {
-    padding-bottom: $dash_padding;
-    color: $system_fg_color;
+    @if $is_highcontrast {
+      width: 2px;
+      background-color: $hc_inset_color;
+    }
   }
-}
 
-// separator between favourites and running apps
-.dash-separator {
-  width: 1px;
-  margin: 0 $base_margin;
-  background-color: $system_borders_color;
-  margin-bottom: $dash_padding;
-  @if $is_highcontrast {
-    width: 2px;
+  // make sure all dash components have same margin from screen edge
+  .dash-separator,
+  .dash-background,
+  .dash-item-container {
+    margin-bottom: $dash_edge_offset;
   }
 }
 

diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 9fdfd104b2e1b858bc1701cb0bd52625d1555ca8..e7b11ed8d6cb8ba9fe83d04b15f4907bdbc65d23 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -28,6 +28,10 @@
   border-radius: $modal_radius * 1.5;
   padding: $base_padding * 2;
   margin:0 $base_margin * 3;
+  border: 2px solid transparent;
+  @if $is_highcontrast {
+    border-color: $hc_inset_color;
+  }
 }
 
 %search_section_content_item {
@@ -48,7 +52,7 @@
 
 // Search results with icons
 .grid-search-result {
-  @extend .app-well-app;
+  @extend .overview-tile;
 }
 
 // search result provider
@@ -86,11 +90,18 @@
   // list item title (with leading icon)
   .list-search-result-title {
     spacing: $base_padding * 2;
-    // font-weight: bold;
+
+    @if $is_highcontrast {
+      font-weight: bold;
+    }
   }
 
   // list item description
   .list-search-result-description {
     color: $system_insensitive_fg_color;
+
+    @if $is_highcontrast {
+      color: $system_fg_color;
+    }
   }
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index 9168ed91186225711df5f0e390b0bf784d81c26c..9b8305fda1795a8c63ea6e6f560737228da08b3e 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -4,7 +4,6 @@
 $switcher_padding: $base_padding * 2;
 $switcher_radius: $modal_radius + $switcher_padding;
 
-
 // the full screen container of the switcher
 .switcher-popup {
   padding: 0;
@@ -26,11 +25,8 @@ $switcher_radius: $modal_radius + $switcher_padding;
   // each item in the list
   .item-box {
     @include tile_button($osd_fg_color);
-    // override over style so mouse doesn't steal focus
+    // override %tile style so mouse doesn't steal focus
     &:hover {background: none;}
-    @if $is_highcontrast {
-      box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2);
-    }
   }
 
   .separator {

diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index 613a9d65af40331b25e79bf0f7be99d2b00442c9..eb0da331fcfa6c4fbfdb6fc1e62e1ad73ae37752 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -34,7 +34,7 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
   }
 
   @if $is_highcontrast {
-    border:2px solid $outer_borders_color;
+    border:2px solid $hc_inset_color;
   }
 }
 

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 82ce48b096c97c3de1724997b0ae0ac31d023336..506bf18271db9605ced1d755ad532e384da5cdf9 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -2324,7 +2324,7 @@ export const FolderIcon = GObject.registerClass({
 }, class FolderIcon extends AppViewItem {
     _init(id, path, parentView) {
         super._init({
-            style_class: 'app-well-app app-folder',
+            style_class: 'overview-tile app-folder',
             button_mask: St.ButtonMask.ONE,
             toggle_mode: true,
             can_focus: true,
@@ -2992,7 +2992,7 @@ export const AppIcon = GObject.registerClass({
         const expandTitleOnHover = appIconParams['expandTitleOnHover'];
         delete iconParams['expandTitleOnHover'];
 
-        super._init({style_class: 'app-well-app'}, isDraggable, expandTitleOnHover);
+        super._init({style_class: 'overview-tile'}, isDraggable, expandTitleOnHover);
 
         this.app = app;
         this._id = app.get_id();
@@ -3014,13 +3014,14 @@ export const AppIcon = GObject.registerClass({
         this._iconContainer.add_child(this.icon);
 
         this._dot = new St.Widget({
-            style_class: 'app-well-app-running-dot',
+            style_class: 'app-grid-running-dot',
             layout_manager: new Clutter.BinLayout(),
             x_expand: true,
             y_expand: true,
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.END,
         });
+        this._dot.translationY = 8;
         this._iconContainer.add_child(this._dot);
 
         this.label_actor = this.icon.label;

diff --git a/js/ui/dash.js b/js/ui/dash.js
index dac2a99a7cc2fead1eb117620aa020795bb52666..dc1bd70faee1e69e5723fcc33214f563034aff65 100644 (file)
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -153,7 +153,7 @@ class DashItemContainer extends St.Widget {
         this.destroy_all_children();
 
         this.child = actor;
-        this.child.y_expand = true;
+        this.child.y_expand = false;
         this.add_child(this.child);
     }
 

diff --git a/js/ui/switcherPopup.js b/js/ui/switcherPopup.js
index 9b956e8d46d275731acf7e21b24e68fcc4396b75..fd99b8374ac2dadb97ff4b0bcf7fdb58c50e7fbb 100644 (file)
--- a/js/ui/switcherPopup.js
+++ b/js/ui/switcherPopup.js
@@ -488,15 +488,15 @@ export const SwitcherList = GObject.registerClass({
 
     highlight(index, justOutline) {
         if (this._items[this._highlighted]) {
-            this._items[this._highlighted].remove_style_pseudo_class('outlined');
             this._items[this._highlighted].remove_style_pseudo_class('selected');
+            this._items[this._highlighted].remove_style_pseudo_class('highlighted');
         }
 
         if (this._items[index]) {
             if (justOutline)
-                this._items[index].add_style_pseudo_class('outlined');
-            else
                 this._items[index].add_style_pseudo_class('selected');
+            else
+                this._items[index].add_style_pseudo_class('highlighted');
         }
 
         this._highlighted = index;